<template>
	<view class="box">
		<view class="fontweight">订单统计</view>
		<view>
			<u-tabs :list="list1" :scrollable="false" @click="click"
				lineWidth="56"
				lineColor="#ffd02b"
			>
				<view  slot="right"  style="padding-left: 4px;"  @tap="show = true">  
				    <u-icon  name="calendar"   size="21" bold></u-icon>
				</view>
			</u-tabs>
			<u-line color="#c5c4c8" style="margin-top: -2px;">
				
			</u-line>
			<view >
				<view class="content1">
					<u-row customStyle="margin-bottom: 10px">
					    <u-col span="8">
					        <view class=" " >
					        	<span>{{dateValue}} 收入({{switchs}})</span>
								<u-gap height="10" ></u-gap>
								<view class="fontweight" >{{(sumTotalPrice/100).toFixed(2)}}元</view>
								<span style="font-size: 12px;">服务{{((sumFine+sumTotalPrice)/100).toFixed(2)}} / 扣款{{(sumFine/100).toFixed(2)}} </span>
							</view>
					    </u-col>
					   <u-col span="4">
					        <view class="demo-layout " >
					        	<br/>
					        	<span>完成单</span><br/>
					        	<span>{{total}}</span>
					        </view>
					    </u-col>
					</u-row>
				</view>
				<view class="fontweight">订单明细</view>
				<u-empty    v-if="list.length==0&status!='loadmore'"   text="无订单明细"    icon="https://cdn.uviewui.com/uview/empty/history.png">
				</u-empty>
				<view v-else class="content2" v-for="(item, index) in list"  @click="navigateTo(item.id)"> 
					<u-row customStyle="margin-bottom: 10px">
					    <u-col span="8">
					        <view class="demo-left" >
					        	预:<span >{{utils.dateFormat(item.appointmentTime)}} </span><span style="margin-left: 10px;">完成</span>
					        </view>
					    </u-col>
					   <u-col span="4">
					        <view class="demo-right" >
					        	入账<span> {{(item.totalPrice/100).toFixed(2)}}</span>元
					        </view>
					    </u-col>
					</u-row>
					<u-steps  direction="column" dot activeColor="#ffd02b" inactiveColor="#00ac4e">
						<u-steps-item :title="item.userAddress" :desc="item.address"></u-steps-item>
					</u-steps>
				</view>	
				<view>
				        <u-datetime-picker
				                :show="show"
				                v-model="value1"
				                :mode="datetype"
								@cancel="show = false"
								@confirm="datetYear"
								:formatter="formatter"
				        ></u-datetime-picker>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" v-if="list.length!=0"/>
	</view>
</template>

<script>
import {
	    mapState 
	} from 'vuex';
	export default {
		data() {
			return {
				status: 'loadmore',//上滑加载函数
				technicianlatitude:"",
				technicianlongitude:"",
				total:0,
				sumTotalPrice:0,
				sumFine:0,
				list:[],
				pageVO:{
					pageNo: 1,
					pageSize: 20,
					technicianId:"", 
					receiveStatus:4,//技师接单状态（1未接单，2已接单，3服务中，4已完成，5拒绝接单，6取消）
					datatype:"sun",
					appointmentTimeSort:"2023-10",
					sort:"asc",//排序
				},
				show: false,
                value1: Number(new Date()),
				list1: [{
				        name: '日订单',
						value:"日"
				    }, {
				        name: '月订单',
						value:"月"
				    },
			    ],
				switchs:"日",
				datetype:"date",
				dateValue:"",
				dateSwitch:""
			}
		},
		computed: {
			//获取是否登录
			...mapState(['hasLogin','userInfo']) 
		},
		mounted() {
			this.showPage()
		    //this.cont()
		},
		onLoad() {
			this.dateValue=uni.$u.timeFormat(new Date(), 'yyyy-mm-dd');
			this.pageVO.appointmentTimeSort=uni.$u.timeFormat(new Date(), 'yyyy-mm-dd');
		},
		methods: {
			//获取数据
			showPage(){
				this.pageVO.technicianId=this.userInfo.id
				this.request.getRequest(this.http.httpsLian.orderDispatchRecord,this.pageVO, true)
				.then(res => { 
					//console.log("sss："+JSON.stringify(res))
					this.cont()
					if(res.data.list.length==0) {
					    this.status = 'nomore';
					    return
					}
					if(res.data.list.length<this.pageVO.pageSize) {
					    this.status = 'nomore';
					}
					if (this.pageVO.pageNo!= 1) {
						this.list = this.list.concat(res.data.list)
					} else {
						this.list=res.data.list
					} 
					
				}).catch(res => {
					uni.$u.toast("网络异常18")
				})
			},
			cont(){
				this.request.getRequest(this.http.httpsLian.SumTimePrice,{
					technicianId:this.userInfo.id, 
					receiveStatus:this.pageVO.receiveStatus,//技师接单状态（1未接单，2已接单，3服务中，4已完成，5拒绝接单，6取消）
					datatype:this.pageVO.datatype,
					appointmentTimeSort:this.pageVO.appointmentTimeSort,
				}, false)
				.then(res => { 
					if(res.code!=0 )return ;
					console.log(res.data.total)
					this.sumTotalPrice=Number(res.data.sumTotalPrice)
					this.sumFine=Number(res.data.sumFine);
					this.total=Number(res.data.total)
				}).catch(res => {
					uni.$u.toast("网络异常17")
				})
			},
			//上拉事件触发
			onReachBottom(){
				console.log('上拉事件触发');
				this.pageVO.pageNo+=1
				this.status = 'loading';
				this.showPage()
				this.$emit('onReachBottomZ')
			},
			// 页面下拉时触发，与 onLoad 等生命周期函数平级
			onPullDownRefresh() {
				console.log('页面下拉时触发');
				this.status = 'loadmore';
				//回复默认值
				this.resetting()
			    setTimeout(() => {
					// 操作完成时，必须结束下拉刷新，否则一直会有 loading 标志
					uni.stopPullDownRefresh();
				}, 1000);
			},
			//点击日月切换
			click(item) {
				this.switchs=item.value
				this.datetype="year-month"
				if(item.value=='日'){
					this.datetype="date"
					this.dateValue=uni.$u.timeFormat(this.dateSwitch, 'yyyy-mm-dd');
					this.pageVO.appointmentTimeSort=this.dateValue
					this.pageVO.datatype="sun"
					this.resetting()
					return 
				}
				if(item.value=='月'){
					this.dateValue=uni.$u.timeFormat(this.dateSwitch, 'yyyy-mm');
					this.pageVO.appointmentTimeSort=this.dateValue
					this.pageVO.datatype="month"
					this.resetting()
				}
			},
			datetYear(item){
				let s;
				this.dateSwitch=item.value
				if(this.datetype=="year-month"){
					this.dateValue= uni.$u.timeFormat(item.value, 'yyyy-mm')
					this.pageVO.appointmentTimeSort=this.dateValue
					this.pageVO.datatype="month"
					
				}
				if(this.datetype=="date"){
					this.dateValue = uni.$u.timeFormat(item.value, 'yyyy-mm-dd');
					this.pageVO.appointmentTimeSort=this.dateValue
					this.pageVO.datatype="sun"
				}
				this.show=false
			
				this.resetting()
			},
			//重置查询
			resetting(){
				this.list=[]
				this.pageVO.pageNo=1
				this.pageVO.pageSize=4
				this.showPage()
			},
			//跳转详情
			navigateTo(id){
				uni.navigateTo({
				   url: "/pagesB/serviceList/details?id="+id
				});
			},
			 formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`
                }
                if (type === 'month') {
                    return `${value}月`
                }
                if (type === 'day') {
                    return `${value}日`
                }
                return value
            },
		}
	}
</script>

<style lang="scss" scoped>
.box{
	margin-top: 10rpx;
	padding: 0px 10px;
}
.content1{
	background-color: $Main-yellow-color;
	padding: 10px 10px;
	margin-top: 10px;
	border-radius: 4px;
	margin-bottom: 20rpx;
	.demo-layout {
		border-radius: 4px;
		margin: 0px auto;
		margin-bottom: 10rpx;
		margin-top: 20rpx;
		text-align: center;
	}
	span{
		color: $uni-text-color-grey;
	}
}
.content2{
	background-color: white;
	padding: 8px ;
	margin-top: 10px;
	border-radius: 4px;
	.demo-right {
		text-align: right;
		span{
			color: red;
		}
	}
	.demo-left{
		color: $uni-text-color-placeholder;
	}
	.demo-left,.demo-right{
		font-size: 13px;
		
	}
	/deep/.u-steps-item__content {
		margin-bottom: 10rpx;
	}
	/deep/.u-steps-item__line {
		height: 90px;
	}
}
.fontweight{
	font-weight: 550;
}
</style>
